import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { getSystemInfoSync } from '@ray-js/ray';
import { devices, dpKit } from './devices';
import { updateThemeType } from './redux/modules/themeSlice';
import { initializeSystemInfo } from './redux/modules/systemInfoSlice';
import store from './redux';
import './styles/index.less';

// 定义组件的Props接口，包含设备信息和其他可选参数
interface Props {
  devInfo: DevInfo;
  // eslint-disable-next-line react/require-default-props
  extraInfo?: Record<string, any>;
}

// 定义组件的状态接口，包含设备信息
interface State {
  devInfo: DevInfo;
}

// 高阶组件函数，用于封装子组件并提供全局状态管理功能
const composeLayout = (SubComp: React.ComponentType<any>) => {
  const { dispatch } = store;

  return class PanelComponent extends Component<Props, State> {
    // 应用启动时调用的方法，初始化系统信息和主题类型
    async onLaunch(object: any) {
      console.log('=== App onLaunch', object);
      // 初始化通用设备模块
      devices.common.init();
      // 监听设备初始化完成事件，并初始化dpKit
      devices.common.onInitialized(device => dpKit.init(device));
      // 获取系统信息
      const systemInfo = getSystemInfoSync();
      const { theme } = systemInfo;

      // 将系统信息存储到Redux状态中
      dispatch(initializeSystemInfo(systemInfo));
      // 更新主题类型
      dispatch(updateThemeType(theme));
    }

    // 渲染方法，将子组件包装在Provider中以提供Redux状态
    render() {
      const { extraInfo } = this.props;

      return (
        <Provider store={store}>
          {/* @ts-ignore */}
          <SubComp extraInfo={extraInfo} {...this.props} />
        </Provider>
      );
    }
  };
};

export default composeLayout;